<template>
  <div class="pt-wrapper">
   <header class="header"></header>
   <main class="main">
   <router-view></router-view>
  </main>
   <footer class="footer">
     <FooterNav @onFooterNavActive="handleFooterNav"></FooterNav>
   </footer>
  </div>
</template>

<script lang="ts">
import FooterNav from '@/components/Footer/index.vue'
import { defineComponent } from 'vue'
export default defineComponent({
  components: {
    FooterNav
  },
  setup(props, context) {

    const handleFooterNav = (active: number) => {
      console.log('active', active)
    }
    return {
      handleFooterNav
    }
  }
})
</script>

<style lang="scss">
.pt-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    height: .8rem;
    background: lightblue;
  }
  .main {
    flex: 1;
    overflow: auto;
  }
  .footer {}
}
</style>
